import React, { Component } from 'react'
import './index.less'
import MenuConfig from './../../config/menuConfig'
import { Menu} from 'antd';
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import {switchMenu} from './../../redux/action'
const { SubMenu } = Menu;

class NavLeft extends Component {
    state={
        currentKey:""
    }
    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuConfig);
        let currentKey = window.location.hash.replace(/#|\?.*/g,'');
        this.setState({
            currentKey,
            menuTreeNode 
        })
        
    }
    //菜单渲染
    renderMenu=(data)=>{
        return data.map((item)=>{
            if(item.children){
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
        return <Menu.Item title={item.title} key={item.key}>
            <NavLink to={item.key}>{item.title}</NavLink>
            </Menu.Item>  
        })
    }
    handleClick=({item,key})=>{
        console.log(key)
        const {dispatch} = this.props;
        dispatch(switchMenu(item.props.title))
        this.setState({
            currentKey:key
        })
    }
    render() {
        return (
            <div className="nav-left">
              <div className="logo">
                  <img src="assets/logo-ant.svg" alt=""/>
                  <h1>Wind CMS</h1>
              </div>
                <Menu
                    onClick={this.handleClick}
                    selectedKeys={this.state.currentKey}
                    theme="dark"
                >
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}
export default connect()(NavLeft)